Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

src/features/messages/MessageTable.tsx (2)

100-104: Lines exceed 100-character width — break 'em up like layers of an onion.

These lines are quite long. The coding guidelines say to maintain 100 character line width. Consider reformatting for readability.

🧅 Suggested formatting

-        <div className={styles.iconText}><SafeTextMorph>{getChainDisplayName(mp, originChainName, true)}</SafeTextMorph></div>
+        <div className={styles.iconText}>
+          <SafeTextMorph>
+            {getChainDisplayName(mp, originChainName, true)}
+          </SafeTextMorph>
+        </div>

Same for the destination line (line 104).

As per coding guidelines: "Use single quotes, trailing commas, and maintain 100 character line width."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/features/messages/MessageTable.tsx` around lines 100 - 104, The two long
JSX lines inside MessageTable should be wrapped to stay under 100 chars and use
the project's string style: split the LinkCell and its children onto multiple
lines (reference LinkCell, ChainLogo, SafeTextMorph, getChainDisplayName, and
styles.iconText) so each prop and child sits on its own line; convert
double-quoted JSX string props (e.g. aClasses and className) to single quotes
and ensure any trailing commas are applied where appropriate in surrounding JS
objects; specifically reformat both the origin LinkCell and the destination
LinkCell blocks so ChainLogo and the div with SafeTextMorph are on their own
indented lines under the parent LinkCell.

---

46-48: Existing code nit: manual string concatenation for className instead of clsx().

This isn't part of your change, but since you're in the neighborhood — line 46-48 uses template string concatenation for conditional classes instead of clsx(), which is already imported elsewhere in the project and recommended by the coding guidelines.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/features/messages/MessageTable.tsx` around lines 46 - 48, Replace the
manual template-string concatenation used in the element's className (the string
that includes "relative cursor-pointer border-b ..." and the conditional
isFetching && 'blur-xs') with a call to clsx so conditional classes are handled
cleanly; update the JSX to use className={clsx('relative cursor-pointer border-b
border-blue-50 last:border-0 hover:bg-pink-50 active:bg-pink-100 transition-all
duration-500', { 'blur-xs': isFetching })} and ensure clsx is imported (or use
the existing project clsx import) so the conditional class toggles correctly.

src/components/SafeTextMorph.test.tsx (1)

53-68: Good fallback test — consider verifying the console.error was actually called.

You're spying on console.error and mocking it (good, keeps test output clean), but you never assert it was called. Since the componentDidCatch explicitly logs 'TextMorph error:', you could add a quick assertion to confirm the error boundary's logging path works as expected.

🧅 Optional assertion

     expect(span).not.toBeNull();
 
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'TextMorph error:',
+      expect.any(Error),
+    );
     consoleSpy.mockRestore();

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/SafeTextMorph.test.tsx` around lines 53 - 68, Add an assertion
to the test in SafeTextMorph.test.tsx to verify the console.error spy was called
when the error boundary handled the thrown error: after rendering the
SafeTextMorph with shouldThrow = true, assert that the jest spy on console.error
(created as consoleSpy) was called and that at least one call includes the
expected log string used in SafeTextMorph's componentDidCatch (e.g., 'TextMorph
error:'); then restore the spy as already done. This ensures the error
boundary's logging path in SafeTextMorph is exercised.

src/features/messages/MessageDetails.tsx (1)

103-110: SafeTextMorph on a mostly-static heading — donkey work for little payoff.

This heading text (ICA Message <id> to <chain>) is set once per page load and doesn't change while the user views the page. The morphing animation won't be visible since there's no text transition happening. It's harmless, but it adds a component boundary and error boundary overhead for no visual benefit.

Consider whether you actually want the animation here, or if a plain string suffices. The StatusHeader usage on line 195 makes much more sense since that text actually transitions between states.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/features/messages/MessageDetails.tsx` around lines 103 - 110, The
SafeTextMorph wrapper around the static heading in MessageDetails is unnecessary
overhead; replace the <SafeTextMorph> around the computed heading text with a
plain string/JSX expression so the h2 renders the static text directly (keep the
existing interpolation using isIcaMsg, trimToLength(msgId, 6), and
getChainDisplayName(multiProvider, destinationChainName)); if you still want
animation for dynamic state changes, keep SafeTextMorph only where text actually
transitions (e.g., StatusHeader) and remove the SafeTextMorph import/usage from
the top heading in MessageDetails.

package.json (1)

37-37: torph@0.0.5 is a pre-release dependency with legitimate stability concerns.

This package is actively used in SafeTextMorph but exists in a pre-release state. While it's resolvable via the pnpm lock file, it doesn't appear on the public npm registry, which means it could be sourced from a private registry or has been unpublished—adding to the risk of it quietly disappearing. Pre-release versions like 0.0.x are prone to breaking changes with any version bump and typically lack extensive community vetting.

Consider monitoring this dependency or reaching out to the maintainers to understand their stability roadmap.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@package.json` at line 37, The dependency "torph@0.0.5" used by SafeTextMorph
is a pre-release/unpublished package and poses stability risk; update
package.json by either replacing "torph" with a stable alternative or
pinning/locking it more safely (e.g., move to optionalDependency or add a strict
resolution entry) and add a comment and monitoring strategy; locate the
reference to "torph" in package.json and SafeTextMorph usage, then either swap
in a vetted package, vendor the required code into the repo, or add a note and a
task to contact the maintainers and add CI/alerting to detect future removals or
version bumps.